<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>事件修饰符</title>
        <script src="../lib/vue-2.4.0.js"></script>

        <style>
            .inner {
                height: 80px;
                width: 80%;
                background-color: pink;
            }
            .outer{
                padding: 40px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">

            <p>1.stop阻止事件冒泡</p>
            <div class="inner" @click="divHandler">
                <input type="button" value="戳他[默认]" @click="btnHandler" />
                <input type="button" value="戳他[使用stop]" @click.stop="btnHandler" />
            </div>

            <p>2.prevent阻止默认行为</p>
            <a href="https://www.baidu.com" @click.prevent="linkClick">百度一下</a>

            <p>3.capture捕获触发事件的机制</p>
            <div class="inner" @click.capture="divHandler">
                <input type="button" value="戳他" @click="btnHandler"/>
            </div>

            <div class="outer" @click="divHandler2">
                <div class="inner" @click.capture="divHandler">
                    <input type="button" value="戳他" @click="btnHandler"/>
                 </div>
            </div>


            <p>4.self实现只有点击当前元素时候，才会触发事件处理函数</p>
            <div class="inner" @click.self="divHandler">
                <input type="button" value="戳他" @click="btnHandler"/>
            </div>

            <p>5.once只触发一次事件处理函数</p>
            <a href="https://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>
            <input type="button" value="只触发once" @click.once="btnHandler"/>

            <p>6.stop和self的区别</p>
            <div class="outer" @click="divHandler2">
                <div class="inner" @click.stop="divHandler">
                    <input type="button" value="戳他" @click="btnHandler"/>
                </div>
            </div>

            <!-- self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为 -->
            <div class="outer" @click="divHandler2">
                <div class="inner" @click.self="divHandler">
                    <input type="button" value="戳他" @click="btnHandler"/>
                </div>
            </div>

        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {},
                methods: {
                    divHandler() {
                        console.log("触发了 inner div 的点击事件");
                    },
                    btnHandler() {
                        console.log("触发了 btn 的点击事件");
                    },
                    linkClick(){
                        console.log("触发了 link 点击事件")
                    },
                    divHandler2(){
                        console.log("触发了 outer div 的点击事件");
                    }

                },
            });
        </script>
    </body>
</html>
